<template>
  <div>
    <el-card id="search">
      <!-- 搜索框 -->
      <el-row>
        <el-col :span="12">
          <el-input
            placeholder="用户名"
            v-model="serachModel.username"
            clearable
          >
          </el-input>
          <el-input placeholder="电话" v-model="serachModel.phone" clearable>
          </el-input>
          <el-button
            type="primary"
            round
            icon="el-icon-search"
            @click="getBlackList"
            >查询</el-button
          >
        </el-col>
        <el-col :span="12" align="right"
          ><el-button
            type="primary"
            icon="el-icon-plus"
            circle
            @click="OpenEditUi(null)"
          ></el-button
        ></el-col>
      </el-row>
    </el-card>

    <!-- 结果列表 -->
    <el-card>
      <el-table :data="blackUserList" border style="width: 100%">
        <el-table-column label="#" width="140">
          <template slot-scope="scope">
            {{
              (serachModel.pageNo - 1) * serachModel.pageSize + scope.$index + 1
            }}</template
          >
        </el-table-column>
        <el-table-column prop="username" label="用户名" width="180">
        </el-table-column>
        <el-table-column prop="phone" label="手机号"> </el-table-column>

        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button-group>
              <el-button
                type="primary"
                icon="el-icon-edit"
                @click="OpenEditUi(scope.row.id)"
              ></el-button>
              <el-button
                type="primary"
                icon="el-icon-delete"
                @click="deleteBlackUserById(scope.row)"
              ></el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 分页组件 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="serachModel.pageNo"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="serachModel.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <!-- 用户信息编辑对话框 -->
    <el-dialog
      @close="cleaForm"
      :title="title"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="blackUserForm" :rules="rules" ref="blackUserFormRef">
        <el-form-item
          label="用户名"
          :label-width="formLabelWidth"
          prop="username"
        >
          <el-input
            v-model="blackUserForm.username"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="联系电话"
          :label-width="formLabelWidth"
          prop="phone"
        >
          <el-input v-model="blackUserForm.phone" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveBlackUser">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import blackListApi from "@/api/blackList";

export default {
  data() {
    var checkPhone = (rule, value, callback) => {
      var reg =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (!reg.test(value)) {
        return callback(new Error("手机格式错误"));
      }
      callback();
    };
    return {
      loading: false,
      formLabelWidth: "130px",
      // 用户表单
      blackUserForm: {},
      // 对话框名称
      title: "",
      // 对话框是否可见
      dialogFormVisible: false,

      total: 0,

      serachModel: {
        pageNo: 1,
        pageSize: 10,
      },
      blackUserList: [],

      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 26,
            message: "长度在 2 到 26 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入登录密码", trigger: "blur" },
          {
            min: 6,
            max: 16,
            message: "长度在 6 到 16 个字符",
            trigger: "blur",
          },
        ],
        phone: [{ validator: checkPhone, trigger: "blur" }],
      },
    };
  },

  methods: {
    handleSizeChange(pageSize) {
      this.serachModel.pageSize = pageSize;
      this.getBlackList();
    },
    handleCurrentChange(pageNo) {
      this.serachModel.pageNo = pageNo;
      this.getBlackList();
    },

    // 查询用户
    getBlackList() {
      this.loading = true;
      blackListApi.getBlackList(this.serachModel).then((response) => {
        this.blackUserList = response.data.rows;
        this.total = response.data.total;
      });
      this.loading = false;
    },

    // 打开对话框UI
    OpenEditUi(id) {
      if (id == null) {
        this.title = "新增黑名单用户";
      } else {
        this.title = "修改黑名单用户";
        // 更具Id查询用户
        blackListApi.getBlackUserById(id).then((response) => {
          this.blackUserForm = response.data;
        });
      }
      this.dialogFormVisible = true;
    },

    // 清理表单数据
    cleaForm() {
      // 清理数据
      this.blackUserForm = {};
      this.$refs.blackUserFormRef.clearValidate();
    },

    // 保存用户信息
    saveBlackUser() {
      // 触发表达验证
      this.$refs.blackUserFormRef.validate((valid) => {
        if (valid) {
          // 提交数据给后台

          blackListApi.saveBlackUser(this.blackUserForm).then((response) => {
            // 成功提示
            this.$message({
              showClose: true,
              message: "操作成功",
              type: "success",
            });
            // 关闭对话框
            this.dialogFormVisible = false;
            // 刷新表单
            this.getBlackList();
          });
        } else {
          // 验证不通过
          this.$message({
            showClose: true,
            message: "表单验证不通过",
            type: "error",
          });
          loading: false;
          return false;
        }
      });
    },

    // 删除用户
    deleteBlackUserById(blackUser) {
      this.$confirm(`您确认删除黑名单用户 ${blackUser.username}?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          blackListApi.deleteBlackUserById(blackUser.id).then((response) => {
            this.$message({
              type: "success",
              message: response.message,
            });
            this.getBlackList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },

  created() {
    this.getBlackList();
  },
};
</script>

<style>
#search .el-input {
  width: 200px;
  margin-right: 10px;
}
.el-dialog .el-input {
  width: 85%;
}
</style>
